<template>
  <div class="pingjia">
    <div class="navtobo">
      <ul>
        <li @click="fanh">
          <div class="img">
            <img src="../assets/syb.png" alt="" />
          </div>
        </li>
        <li><span>发表评价</span></li>
        <li>
          <div class="img" @click="piingjia">
            <span>发表评价</span>
          </div>
        </li>
      </ul>
    </div>

    <div class="pingjia">
      <div class="shangp">
        <ul>
          <li><img :src="shangping.goodsList[0].picUrl" alt="" /></li>
          <li>
            <span>{{ shangping.goodsList[0].goodsName }}</span>
          </li>
        </ul>
      </div>
      <div class="xxx"><span>商品评分:</span> <van-rate v-model="star" /></div>
      <van-field v-model="value" placeholder="输入评价" />

      <div class="shanchuan">
        <van-uploader
          v-model="fileList"
          :after-read="afterRead"
          multiple
          :max-size="5000 * 10240"
          :max-count="3"
          @oversize="onOversize"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { Rate } from "vant";
import { Uploader } from "vant";
import { Field } from "vant";
import API from "../http/API";
export default {
  name: "pingjia",
  components: {
    [Uploader.name]: Uploader,
    [Field.name]: Field,
    [Rate.name]: Rate,
    [Toast.name]: Toast,
  },
  data() {
    return {
      shangping: [],
      star: 5,
      text: "",
      filePath: "",
      orderGoodsId: "",
      value: "",
      fileList: [],
      url: [],
    };
  },
  created() {
    this.shangping = JSON.parse(this.$route.query.shangpin);
    console.log(this.shangping);
  },
  methods: {
    //     ①封装 token
    // ②orderGoodsId：订单中商品 id
    // ③content：评价内容
    // ④star:星级 0~5
    // ⑤hasPicture:是否有图片
    // ⑥filePath:图片的 base64 数组（图片大小<5M，格式 jpg/jpeg/png,最
    // 多 3 张）
    // （没有图片则传空数组）

    piingjia() {
      console.log(this.fileList);
      this.$post(API.POST_COMMENT_POST, {
        token: this.$store.state.token,
        content: this.value,
        star: this.star,
        hasPicture: true,
        filePath: this.url,
        orderGoodsId: this.shangping.goodsList[0].id,
      })
        .then((res) => {
          console.log(res);
          Toast("评论成功");
        })
        .catch((err) => {});
    },
    onOversize(file) {
      console.log(file);
      for (let index = 0; index < file.length; index++) {
        this.url.push(file[index].content);
      }
      Toast("文件大小不能超过 500kb");
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
    },
    fanh() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="less" scoped>
.pingjia {
  height: 100%;
  background-color: rgb(235, 235, 235);
  .navtobo {
    height: 50px;
    //   background-color: rgb(255, 255, 255);
    display: flex;
    align-items: center;

    ul {
      display: flex;
      margin-left: 10px;
      margin-right: 10px;
      width: 100%;
      // border: 1px solid #000;
      height: 30px;
      li {
        &:nth-child(1) {
          width: 30px;
          height: 100%;
          display: flex;
          align-items: center;
          // border: 1px solid #000;
          .img {
            width: 20px;
            height: 20px;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
        &:nth-child(2) {
          flex: 1;
          display: flex;
          align-items: center;
          span {
            font-size: 17px;
          }
        }
        &:nth-child(3) {
          width: 70px;
          height: 30px;
          // border: 1px solid #000;
          .img {
            width: 70px;
            height: 30px;
            // border: 1px solid #000;
            border-radius: 20px;
            background-color: rgb(236, 89, 89);
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 15px;
            color: rgb(255, 255, 255);
          }
        }
      }
    }
  }
  .pingjia {
    height: 350px;
    border-radius: 10px;
    margin-right: 10px;
    margin-left: 10px;
    background-color: rgb(255, 255, 255);
    position: relative;

    .shanchuan {
      position: absolute;
      bottom: 5px;
      left: 10px;
      display: flex;
      align-items: center;

      flex-direction: column;
    }
  }
  .xxx {
    margin-right: 5px;
    margin-left: 5px;
    display: flex;
    align-items: center;
    margin-top: 5px;

    span {
      font-size: 16px;
    }
  }
  .shangp {
    width: 100%;

    height: 90px;

    // border: 1px solid #000;
    ul {
      display: flex;
      align-items: center;
      border-bottom: 1px solid rgb(207, 206, 206);
      //    border: 1px solid rgb(102, 101, 101);

      li {
        &:nth-child(1) {
          width: 90px;
          height: 90px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        &:nth-child(2) {
          span {
            font-size: 17px;
          }
        }
      }
    }
  }
}
</style>